<template>
  <div class="login">
    <div class="logo">
      <van-image lazy-load :src="require('@/assets/logo.png')" />
    </div>

    <Form :model="formList" ref="formValidate" :rules="ruleValidate">
      <FormItem prop="userName">
        <Input
          size="large"
          icon="ios-person-outline"
          v-model="formList.userName"
          placeholder="请输入用户名"
        ></Input>
      </FormItem>
      <FormItem prop="password">
        <Input
          size="large"
          type="password"
          icon="ios-lock-outline"
          v-model="formList.password"
          placeholder="请输入密码"
        ></Input>
      </FormItem>
      <FormItem>
        <Button
          class="submit-btn"
          @click="handleLoginIn('formValidate')"
          long
          type="primary"
          >登录</Button
        >
      </FormItem>
      <FormItem>
        <Button class="get-btn" @click="handleGetNumber" long type="primary"
          >取号</Button
        >
      </FormItem>
    </Form>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { loginIn } from "api/login";
import { setLocal } from "libs/util";
import { Mutation, namespace } from "vuex-class";
const userModule = namespace("user");

@Component({})
export default class Login extends Vue {
  @userModule.Mutation private setUserInfo!: (userInfo: Object) => void;
  formList: { userName: String; password: String } = {
    userName: "xc",
    password: "xc@123"
  };
  ruleValidate: Object = {
    userName: [{ required: true, message: "请输入用户名", trigger: "blur" }],
    password: [{ required: true, message: "请输入密码", trigger: "blur" }]
  };
  /**
   * @description 点击取号
   */
  handleGetNumber() {
    this.$router.push("/get_number");
  }
  /**
   * @description 点击登录
   */
  handleLoginIn(name: any) {
    let el: any = this.$refs[name];
    el.validate((valid: Boolean) => {
      if (valid) {
        loginIn(this.formList).then((res: any) => {
          if (res.data.code === 200) {
            this.$Message.success("登录成功");
            let result = res.data.result;
            setLocal("userInfo", result);
            this.setUserInfo(result);
             this.$router.push("/call_number");
          } else if (res.data.code === 400) {
            this.$Message.warning("用户名或密码错误！");
          } else {
            this.$Message.warning("服务器错误！");
          }
        });
      } else {
        this.$Message.error("请填写用户名或密码！");
      }
    });
  }
}
</script>

<style scoped lang="less">
@media screen and(min-width:751px) {
  .login {
    width: 40%;
  }
}
@media screen and(max-width:750px) {
  .login {
    width: 90%;
  }
}
.login {
  position: absolute;
  left: 50%;
  top: 30%;
  transform: translate(-50%, -50%);
  .logo {
    // font-size: 36px;
    width: 300px;
    text-align: center;
    margin: 30px auto;
    color: #1091fc;
    margin-bottom: 50px;
  }

  .submit-btn {
    background: linear-gradient(90deg, #109ffc, #00c7ff);
  }
  .get-btn {
    background: linear-gradient(90deg, #00c7ff, #109ffc);
  }
}
</style>
